'use client'
import { CDN } from "@/utils/env";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function Pc() {
    const pathname = usePathname()
    const router = useRouter()
    const [isTop, setIsTop] = useState<boolean>(true);

    useEffect(() => {
        const handleScroll = () => {
            setIsTop(window.scrollY < 50);
        }

        window.addEventListener('scroll', handleScroll)
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    }, [])
    return <header className="hidden lg:block">
        <div className="h-[64px]"></div>
        <div className={`fixed left-0 top-0 w-full flex items-center px-[60px] h-[64px] z-10 transition-colors duration-200 ${isTop ? 'bg-transparent' : 'bg-[#0B1611] shadow-lg'
            }`}>
            <img src={`${CDN}images/logo.svg`} className="size-[32px]" />
            <div className="text-white text-[15px] font-[700] mx-[5px] flex-1">Diamond Galaxy</div>
            <div className="flex">
                <div onClick={() => {
                    router.push('/home')
                }} className={`mx-[20px] text-[#ffffff99] cursor-pointer hover:text-white ${pathname === '/home' && 'text-white'}`}>Home</div>
                <div onClick={() => {
                    router.push('/protocol')
                }} className={`mx-[20px] text-[#ffffff99] cursor-pointer hover:text-white ${pathname === '/protocol' && 'text-white'}`}>Privacy Policy</div>
                <div onClick={() => {
                    router.push('/contact')
                }} className={`mx-[20px] text-[#ffffff99] cursor-pointer hover:text-white ${pathname === '/contact' && 'text-white'}`}>Contact us</div>
            </div>
        </div>
    </header>
}